<!DOCTYPE html>
<html>
<body>

<style>
body {
    background-color: #E0ECF8;
   
}

#formone{

   border-style: solid;
    border-width: 5px;
    border-color: #006400;
    width: 400px;
  height: 330px;
  margin:auto;
  padding-left: 40px;
position:relative;
}

</style>

<title>
Feedback Form
</title>

<br>
<br>




<fieldset id="formone">
    <legend>Feedback Form</legend>
<form name="form1" action="#" onSubmit="myFunction()">

<br>

<table border="0"  >

    

<tr >
    <td align="right" >


    Subject:  

    </td>

 <td>  <input type = "text" size="39" name = "subject" id = "subject"  placeholder="Subject" required = "true" input pattern="^[a-zA-Z]{4,20}$"   autofocus required title="Please enter at least 4 to 20 characters"/ >  </td>
  </tr>


     <td align="right" >


    E-mail: 

    </td>

 <td>  



  <input size="39" type="email" id = "mail"  autofocus required title="Please enter emailname@domain.com " placeholder="emailname@domain.com" required = "true" pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"/>







   </td>
  </tr>

</table>

 
 <p>  </p> 

<textarea id="text"rows="10" cols="50" placeholder="text input" required = "true" input pattern="{3,1000}"   autofocus required title="Please enter at least 3 to 1000 characters">
</textarea>

<table border="0"style="width:90%">
  <tr> 
    <td align="right">Reason for feedback:</td>
    <td><select  id="select" >
  <option value="Positive">positive</option>
  <option value="negative">negative</option>
  <option value="angry user">angry user</option>
  <option value="happy user">happy user</option>
  <option value="others">others</option>
     </select></td> 


 
    <td><button type="submit" value="submit" onclick="background();">sent</button></td>

  </tr>

</table>


</form>
</fieldset>
<ul align="center">

          <a href="mainPage.html">Home</a><br>
          <a href="RegForm.html">Registration</a><br>
          <a href="Search.html">Search</a><br>
        
        </ul>

<script>
function background(){

var subject=document.getElementById("subject").value; 
if (!(/^[a-zA-Z]{4,20}$/.test(subject))) {
  document.getElementById("subject").style.backgroundColor = "red";

}else{
  document.getElementById("subject").style.backgroundColor = "white";
}

var mail=document.getElementById("mail").value;
if (!(/.{[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$}/.test(mail))) {
  document.getElementById("mail").style.backgroundColor = "red";

}else{
  document.getElementById("mail").style.backgroundColor = "white";
}

var textarea=document.getElementById("text").value;

if (!(/.{3,1000}/.test(textarea))) {
  document.getElementById("text").style.backgroundColor = "red";

}else{
  document.getElementById("text").style.backgroundColor = "white";
}




}







function myFunction() {


var text=document.getElementById("text").value; 
var reason=document.getElementById("select").value; 
var subject=document.getElementById("subject").value; 
var email=document.getElementById("mail").value; 


 alert("The feedback was successiful sent!!!"+"\nSubject: "+subject+"\nSender e-mail: "+email+"\nReason for sent: "+reason); 

}
  
</script> 
</body>
</html>